<template>
  <div>
    <el-card>
      <CategorySelect :isShowList="showState === SpuStates.SPU_LIST" />
    </el-card>
    <el-card style="margin-top: 10px">
      <SpuList
        v-if="showState === SpuStates.SPU_LIST"
        @setShowState="setShowState"
        @setSpu="setSpu"
      />
      <SpuForm
        v-else-if="showState === SpuStates.SPU_FORM"
        @setShowState="setShowState"
        :spuList="spu"
      />
      <SkuForm v-else @setShowState="setShowState" :spuList="spu" />
    </el-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "Spu",
  });
</script>
<script lang="ts" setup>
  import { ref } from "vue";
  import SpuList from "./components/SpuList.vue";
  import SpuForm from "./components/SpuForm.vue";
  import SkuForm from "./components/SkuForm.vue";
  import type { SpuValueModel } from "@/api/product/model/spuModel";
  import { SpuStates } from "./spu";

  const showState = ref<SpuStates>(SpuStates.SPU_LIST);

  const setShowState = (state: SpuStates) => {
    showState.value = state;
  };
  const spu = ref<SpuValueModel>({
    category3Id: undefined,
    description: "",
    spuImageList: [],
    spuName: "",
    spuSaleAttrList: [],
    tmId: undefined,
  });
  const setSpu = (newSpu: SpuValueModel) => {
    spu.value = newSpu;
  };
</script>

<style lang="scss" scoped></style>
